document.addEventListener("DOMContentLoaded", function () {
    if (document.getElementById('chart1-1')) {
        //下载进度图
        (function () {
            // 声明数据
            var downloadedData = 40;
            var totalData = 125;

            // 计算已下载数据与总数据之比
            var percentage = Math.floor(downloadedData / totalData * 100);
            // 1实例化对象
            var myChart = echarts.init(document.getElementById('chart1-1'));
            // 2. 指定配置项和数据
            var option = {
                color: ['#006cff', '#60cda0'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: "5%",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: "12"
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: downloadedData, name: '已下载' },
                        { value: totalData, name: '总数' },
                    ]
                }],
                graphic: [{
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: percentage + '%',
                        font: '34px Microsoft YaHei',
                        fill: '#ffffff'
                    }
                }]
            };
            // 3. 把配置项给实例对象
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }
    if (document.getElementById('chart1-2')) {
        //历史文件下载情况
        (function () {
            // 1实例化对象
            var myChart = echarts.init(document.getElementById('chart1-2'));
            // 2. 指定配置项和数据
            var option = {
                color: ["#006cff"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        // 默认为直线，可选为：'line' | 'shadow'
                        type: 'shadow'
                    }
                },
                //修改图表的尺寸
                grid: {
                    left: "5%",
                    top: "10px",
                    right: "0%",
                    bottom: "10%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['7-21', '7-22', '7-23', '7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        //修改刻度标签
                        axisLabel: {
                            color: '#ffffff',
                            fontSize: "12"
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                //y轴样式修改
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: '#ffffff',
                            fontSize: "12"
                        },
                        axisLine: {
                            // show: false,
                            //如果想要设置单独的线条样式
                            lineStyle: {
                                color: "rgba(2, 72, 122,.1)",
                                width: 1,
                                type: "solid"
                            }
                        },
                        //分割线颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(2, 72, 122,.1) ",
                                width: 1,

                            }

                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: [200, 600, 1200, 800, 450, 900, 300, 500, 1000, 150],
                        // 修改柱子圆角
                        // itemStyle: {
                        //     barBorderRadius: 5
                        // }

                    }
                ]
            };
            // 3. 把配置项给实例对象
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }

    if (document.getElementById('mtable')) {
        (function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('mtable'));

            // 定义数据
            var dataBDS = [176, 96, 193, 157, 126, 124, 137, 238, 177, 186];
            var dataGPS = [247, 147, 139, 147, 156, 282, 167, 174, 129, 180];
            var dataGLO = [171, 265, 190, 259, 207, 139, 256, 155, 294, 118];
            var dataGAL = [102, 283, 280, 118, 258, 252, 130, 242, 211, 146];

            // X 轴数据
            var xAxisDataBDS = ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'];
            var xAxisDataGPS = ['g01', 'g02', 'g03', 'g04', 'g05', 'g06', 'g07', 'g08', 'g09', 'GPS0'];
            var xAxisDataGLO = ['r01', 'r02', 'r03', 'r04', 'r05', 'r06', 'r07', 'r08', 'r09', 'r10'];
            var xAxisDataGAL = ['e01', 'e02', 'e03', 'e04', 'e05', 'e06', 'e07', 'e08', 'e09', 'e10'];

            // 公共样式
            var commonOption = {
                tooltip: {
                    trigger: 'axis'
                },
                //修改图表的尺寸
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        color: '#ffffff' // 设置 X 轴字体颜色
                    }
                },
                yAxis: {
                    axisLabel: {
                        color: '#ffffff' // 设置 Y 轴字体颜色
                    }
                },
                series: [{
                    type: 'bar',
                    barWidth: '60%',
                    itemStyle: {
                        // color: new echarts.graphic.LinearGradient(
                        //     0, 0, 0, 1,
                        //     [
                        //         { offset: 0, color: '#83bff6' },
                        //         { offset: 0.5, color: '#188df0' },
                        //         { offset: 1, color: '#188df0' }
                        //     ]
                        // )
                    }
                }]
            };

            function changeData(type, button) {
                // 移除所有按钮的 active 类
                document.querySelectorAll('.button-group button').forEach(function (btn) {
                    btn.classList.remove('active');
                });

                // 为当前点击的按钮添加 active 类
                button.classList.add('active');

                let option = JSON.parse(JSON.stringify(commonOption)); // 复制公共选项
                switch (type) {
                    case 'BDS':
                        option.xAxis.data = xAxisDataBDS;
                        option.series[0].data = dataBDS;
                        option.series[0].name = 'BDS';
                        break;
                    case 'GPS':
                        option.xAxis.data = xAxisDataGPS;
                        option.series[0].data = dataGPS;
                        option.series[0].name = 'GPS';
                        break;
                    case 'GLO':
                        option.xAxis.data = xAxisDataGLO;
                        option.series[0].data = dataGLO;
                        option.series[0].name = 'GLO';
                        break;
                    case 'GAL':
                        option.xAxis.data = xAxisDataGAL;
                        option.series[0].data = dataGAL;
                        option.series[0].name = 'GAL';
                        break;
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            // 默认加载BDS数据，并设置 BDS 按钮为激活状态
            document.querySelector('.button-group button:first-child').classList.add('active');
            changeData('BDS', document.querySelector('.button-group button:first-child'));

            // 使用刚指定的配置项和数据显示图表
            window.addEventListener("resize", function () {
                myChart.resize();
            });

            // // 将 myChart 和 changeData 函数暴露到全局作用域
            window.myChart = myChart;
            window.changeData = changeData;
        })();
    }

    if (document.getElementById('mtable2')) {
        (function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('mtable2'));

            // 定义数据
            var dataBDS = [176, 96, 193, 157, 126, 124, 137, 238, 177, 186];
            var dataGPS = [247, 147, 139, 147, 156, 282, 167, 174, 129, 180];
            var dataGLO = [171, 265, 190, 259, 207, 139, 256, 155, 294, 118];
            var dataGAL = [102, 283, 280, 118, 258, 252, 130, 242, 211, 146];

            // X 轴数据
            var xAxisDataBDS = ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'];
            var xAxisDataGPS = ['g01', 'g02', 'g03', 'g04', 'g05', 'g06', 'g07', 'g08', 'g09', 'GPS0'];
            var xAxisDataGLO = ['r01', 'r02', 'r03', 'r04', 'r05', 'r06', 'r07', 'r08', 'r09', 'r10'];
            var xAxisDataGAL = ['e01', 'e02', 'e03', 'e04', 'e05', 'e06', 'e07', 'e08', 'e09', 'e10'];

            // 公共样式
            var commonOption = {
                tooltip: {
                    trigger: 'axis'
                },
                // 修改图表的尺寸
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        color: '#ffffff' // 设置 X 轴字体颜色
                    }
                },
                yAxis: {
                    axisLabel: {
                        color: '#ffffff' // 设置 Y 轴字体颜色
                    }
                },
                series: [{
                    type: 'bar',
                    barWidth: '60%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    }
                }]
            };

            function changeData(type, button) {
                // 移除所有按钮的 active 类
                document.querySelectorAll('.button-group button').forEach(function (btn) {
                    btn.classList.remove('active');
                });

                // 为当前点击的按钮添加 active 类
                button.classList.add('active');

                let option = JSON.parse(JSON.stringify(commonOption)); // 复制公共选项
                switch (type) {
                    case 'BDS':
                        option.xAxis.data = xAxisDataBDS;
                        option.series[0].data = dataBDS;
                        option.series[0].name = 'BDS';
                        break;
                    case 'GPS':
                        option.xAxis.data = xAxisDataGPS;
                        option.series[0].data = dataGPS;
                        option.series[0].name = 'GPS';
                        break;
                    case 'GLO':
                        option.xAxis.data = xAxisDataGLO;
                        option.series[0].data = dataGLO;
                        option.series[0].name = 'GLO';
                        break;
                    case 'GAL':
                        option.xAxis.data = xAxisDataGAL;
                        option.series[0].data = dataGAL;
                        option.series[0].name = 'GAL';
                        break;
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            }

            // 默认加载BDS数据，并设置 BDS 按钮为激活状态
            document.querySelector('.button-group button:first-child').classList.add('active');
            changeData('BDS', document.querySelector('.button-group button:first-child'));

            // 使用刚指定的配置项和数据显示图表
            window.addEventListener("resize", function () {
                myChart2.resize();
            });

            // 将 myChart2 和 changeData 函数暴露到全局作用域
            window.myChart2 = myChart2;
            window.changeData2 = changeData;
        })();
    }

    if (document.getElementById('chart3-1')) {
        //3-1 宽巷UPD
        (function () {
            // 1实例化对象
            var myChart = echarts.init(document.getElementById("chart3-1"));
            // 2. 指定配置项和数据
            var option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        // 默认为直线，可选为：'line' | 'shadow'
                        type: 'shadow'
                    }
                },
                //修改图表的尺寸
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            fontSize: 15, // 字体大小
                            color: '#ffffff' // 设置 X 轴字体颜色
                        }
                    }
                ],
                //y轴样式修改
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: "rgba(2, 72, 122,.6)",
                            fontSize: "12"
                        },
                        axisLabel: {
                            fontSize: 15, // 字体大小
                            color: '#ffffff' // 设置 X 轴字体颜色
                        }
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: [110, 152, 98, 134, 190, 170, 106, 150, 176, 126],
                        // 修改柱子圆角
                        // itemStyle: {
                        //     barBorderRadius: 5
                        // }

                    }
                ]
            };
            // 3. 把配置项给实例对象
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }

    if (document.getElementById('chart3-2')) {
        //3 - 2 窄巷UPD
        (function () {
            // 1实例化对象
            var myChart = echarts.init(document.getElementById("chart3-2"));
            // 2. 指定配置项和数据
            option = {
                color: ["#377f7f"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            fontSize: 15, // 字体大小
                            color: '#ffffff' // 设置 X 轴字体颜色
                        }
                    }
                ],
                //y轴样式修改
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: "rgba(2, 72, 122,.6)",
                            fontSize: "12"
                        },
                        axisLabel: {
                            fontSize: 15, // 字体大小
                            color: '#ffffff' // 设置 X 轴字体颜色
                        }
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: [101, 152, 98, 170, 185, 123, 100, 93, 143, 102],
                        // 修改柱子圆角
                        // itemStyle: {
                        //     barBorderRadius: 5
                        // }
                    }
                ]
            };
            // 3. 把配置项给实例对象
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }
    if (document.getElementById('chartj-1')) {
        (function () {
            // 坐标信息上传统计
            var myChart = echarts.init(document.getElementById('chartj-1'));
            // 2. 指定配置项和数据
            var option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        // 默认为直线，可选为：'line' | 'shadow'
                        type: 'shadow'
                    }
                },
                //修改图表的尺寸
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['A01', 'A02', 'A03', 'A04', 'A05', 'A06', 'A07',],
                        axisTick: {
                            alignWithLabel: true
                        },
                        //修改刻度标签
                        axisLabel: {
                            color: '#ffffff',
                            fontSize: "12"
                        },
                        axisLine: {
                            show: false
                            // 如果想要设置单独的线条样式 
                            // lineStyle: {
                            //    color: "rgba(255,255,255,.1)",
                            //    width: 1,
                            //    type: "solid"
                        }
                    }
                ],
                //y轴样式修改
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: "rgba(2, 72, 122,.6)",
                            fontSize: "12",
                            formatter: '{value} mm', // 在标签值后面添加单位 mm
                        },
                        axisLine: {
                            // show: false,
                            //如果想要设置单独的线条样式 
                            lineStyle: {
                                color: "rgba(2, 72, 122,.1)",
                                width: 1,
                                type: "solid"
                            }
                        },
                        //分割线颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(2, 72, 122,.1) ",
                                width: 1,

                            }

                        },
                        axisLabel: {
                            fontSize: 15, // 字体大小
                            color: '#ffffff' // 设置 X 轴字体颜色
                        }
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '40%',
                        data: [16, 18, 15, 19, 20, 23, 21],

                        // 修改柱子圆角
                        // itemStyle: {
                        //     barBorderRadius: 5
                        // }

                    }
                ]
            };
            // 3. 把配置项给实例对象
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }

    if (document.getElementById('chartj-2')) {

        //监测站坐标变化
        (function () {
            var myChart = echarts.init(document.getElementById('chartj-2'));
            var option = {
                color: ["#00f2f1", "#ed3f35"],
                tooltip: {
                    trigger: 'axis'
                },
                // legend: {
                //     data: ['Email', 'Union Ads'],
                //     textStyle: {
                //         color: '#4c9bfd' // 图例文字颜色
                //     },
                //     right: '10%' // 距离右边10%
                // },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    show: true,// 显示边框
                    borderColor: '#012f4a',// 边框颜色
                    containLabel: true // 包含刻度文字在内
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: ['7-21', '7-22', '7-23', '7-24', '7-25'],
                    // show: false, // 去除刻度线
                    axisLabel: {
                        color: '#ffffff' // 文本颜色
                    },
                    axisLine: {
                        show: false // 去除轴线
                    },
                    boundaryGap: false  // 去除轴内间距
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false  // 去除刻度
                    },
                    axisLabel: {
                        color: '#ffffff' // 文字颜色
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#012f4a' // 分割线颜色
                        }
                    }
                },
                series: [
                    {
                        name: '坐标变化',
                        type: 'line',
                        // stack: 'Total',
                        // smooth: true,
                        data: [10, 13, 20, 19, 16]
                    },
                    // {
                    //     name: 'Union Ads',
                    //     type: 'line',
                    //     smooth: true,
                    //     // stack: 'Total',
                    //     data: [220, 182, 191, 234, 290, 330, 310]
                    // },

                ]
            };
            myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    }
})();